<template>
  <div class="c-w100 recommend_wrap">
    <div class="recommend_topbg c-w100 c-p" :class="isRecommendOrder ?'c-pb40':'c-pb140'">
      <div @click="showRules = !showRules" v-if="ruleList.length > 0" class="c-flex-row c-flex-center c-bg-white recommend_rules c-fs20 c-fw600 c-fc-FF300C c-pa c-p-r0 c-p-t22">活动规则</div>
      <div class="recommend_title" :class="recommendType == 1 ? 'friends':''">
        <div class="c-w100 c-h">
          <template v-if="isRecommendOrder != 1">
            <img v-if="recommendType == 2" class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/register_title.png'))" alt="">
            <img v-if="recommendType == 1" class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/share_title.png'))" alt="">
            <img v-if="recommendType == 3" class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/place_order_title.png'))" alt="">
          </template>
          <template v-else>
            <img class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/place_order_title.png'))" alt="">
          </template>
        </div>
      </div>
      <div class="recommend_dateCon" v-if="isRecommendOrder != 1">
        <div class="recommend_date c-fs26 c-fc-white c-textAlign-c c-m-0auto c-flex-row c-flex-center">{{time}}</div>
      </div>
      <!-- 红包位置 -->
      <div class="recommend_envelopes c-w100 c-textAlign-c" v-if="recommendType == 3 && action.isProfitReward">
        <div class="recommend_envelopesCon c-w100">
          <div class="envelopes_text c-fs26">每邀请一位好友下单你将获得</div>
          <div class="envelopes_mony c-flex-row c-justify-center c-aligni-baseline">
            <span class="c-fs40 c-fw600">{{'￥' | iosPriceFilter}}</span>
            <span class="c-fs72 c-fw600 price">{{action.profitRewardPrice}}</span>
            <img class="c-ww28 c-hh58 c-ml20" v-if="action.prodType == ckFrom.activity" :src="require('@/assets/i/wap/recommend/least.png')" alt="">
          </div>
          <div class="recommend_text c-ww330 c-m-0auto c-fs26 c-p c-mt15" v-if="action.beProfitRewardPrice != ''">好友立减¥{{action.beProfitRewardPrice}}</div>
          <div class="recommend_sharebtn c-hh88 c-fs36 c-m-0auto c-fw600 c-flex-row c-flex-center" @click.stop="handleClickSharePost">分享海报</div>
          <div class="recommend_shareTxt c-fs26" @click.stop="handleClickShareMoreModal()">分享链接</div>
        </div>
      </div>
      <!-- 宝箱位置 -->
      <div class="recommend_treasure c-w100 c-textAlign-c c-mt40" v-if="(recommendType == 1 || recommendType == 2 || (recommendType == 3 && action.isTaskReward && !action.isProfitReward)) && isRecommendOrder != 1">
        <div class="recommend_sharebtn c-hh88 c-fs36 c-m-0auto c-fw600 c-flex-row c-flex-center" @click.stop="handleClickSharePost">分享海报</div>
        <div class="recommend_shareTxt c-fs26 c-mt20" @click.stop="handleClickShareMoreModal()">分享链接</div>
      </div>
      <!-- 邀请记录 -->
      <div class="c-w100" v-if="(recommendType == 1 || recommendType == 2 || (recommendType == 3 && action.isProfitReward) || (recommendType == 3 && action.isTaskReward)) && isRecommendOrder != 1">
        <div class="recommend_invite c-m-0auto c-ph22 c-textAlign-c">
          <div class="c-ww480 c-p-l0 c-p-r0 c-m-0auto">
            <img :src="require('@/assets/i/wap/recommend/invite_txt.png')" alt="">
          </div>
          <template v-if="type == 1">
            <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 1">再分享<span class="c-fc-FF300C c-fw600">{{mainReward.thisCount == 0 ? mainReward.peopleCount : mainReward.peopleCount - parseInt(mainReward.thisCount % mainReward.peopleCount)}}位</span>好友，获得更多喜悦</div>
            <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 2">再邀请<span class="c-fc-FF300C c-fw600">{{mainReward.thisCount == 0 ? mainReward.peopleCount : mainReward.peopleCount - parseInt(mainReward.thisCount % mainReward.peopleCount)}}位</span>好友注册，获得更多喜悦</div>
            <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 3">再邀请<span class="c-fc-FF300C c-fw600">{{mainReward.thisCount == 0 ? mainReward.peopleCount : mainReward.peopleCount - parseInt(mainReward.thisCount % mainReward.peopleCount)}}位</span>好友下单，获得更多喜悦</div>
          </template>
          <template v-else>
            <template v-if="action.thisCount - action.maxPeopleCount >= 0">
              <div class="c-fs26 c-fc-sblack c-mt40">已获得所有奖励</div>
            </template>
            <template v-else>
              <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 1">再分享<span class="c-fc-FF300C c-fw600">{{action.peopleCount - action.thisCount}}位</span>好友，获得更多喜悦</div>
              <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 2">再邀请<span class="c-fc-FF300C c-fw600">{{action.peopleCount - action.thisCount}}位</span>好友注册，获得更多喜悦</div>
              <div class="c-fs26 c-fc-sblack c-mt40" v-if="recommendType == 3">再邀请<span class="c-fc-FF300C c-fw600">{{action.peopleCount - action.thisCount}}位</span>好友下单，获得更多喜悦</div>
            </template>
          </template>
          <!-- 进度 -->
          <div class="progress-wrap">
            <div class="progress-bg">
              <template v-if="type == 1">
                <div class="progress-bar" :style="{width: (parseInt(mainReward.thisCount % mainReward.peopleCount) / mainReward.peopleCount) * 100 + '%'}"></div>
              </template>
              <template v-else>
                <div class="progress-bar" :style="{width: ((action.thisCount - action.maxPeopleCount >= 0) ? 1 : (action.thisCount / action.maxPeopleCount)) * 100 + '%'}"></div>
              </template>
            </div>
            <div class="stage-wrap">
              <template v-if="type == 2 && mainReward != null">
                <div class="stage-item" style="left:0%;">
                  <div class="dot"></div>
                  <div class="dot-under">0人</div>
                </div>
                <div class="stage-item" v-for="(item, index) in mainReward" :key="index" :style="{left: ((item.peopleCount / action.maxPeopleCount) * 100) + '%'}">
                  <div class="dot" :class="item.thisCount == action.peopleCount ?'active':''" v-if="item.peopleCount != action.maxPeopleCount"></div>
                  <div class="c-ww64 c-hh64 giftbox" v-if="item.peopleCount == action.maxPeopleCount">
                    <img class="c-w100 c-h c-object-fit-c" :src="require('@/assets/i/wap/recommend/giftbox.png')" alt="">
                  </div>
                  <div class="dot-under">{{item.peopleCount}}人</div>
                </div>
              </template>
              <template v-if="type == 1 && mainReward != null && mainReward.peopleCount != null">
                <div class="stage-item" v-for="(item, index) in (mainReward.peopleCount + 1)" :key="index" :style="{left: ((index / mainReward.peopleCount) * 100) + '%'}">
                  <template v-if="index == 0">
                    <div class="dot"></div>
                    <div class="dot-under">0人</div>
                  </template>
                  <template v-if="index == mainReward.peopleCount">
                    <div class="c-ww64 c-hh64 giftbox">
                      <img class="c-w100 c-h c-object-fit-c" :src="require('@/assets/i/wap/recommend/giftbox.png')" alt="">
                    </div>
                    <div class="dot-under">{{mainReward.peopleCount}}人</div>
                  </template>
                </div>
              </template>
            </div>
          </div>
          <!-- 邀请人数 -->
          <div class="c-flex-row c-justify-sb c-aligni-center c-hh60 c-mt30" v-if="action != null && action.avatars.length > 0">
            <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center">
              <div class="c-flex-row c-aligni-center">
                <div class="c-ww30 c-hh60 c-textAlign-c" v-for="(item, index) in action.avatars" :key="index">
                  <span class="c-inline-center c-ww60 c-hh60 c-brp50">
                    <img class="c-ww60 c-hh60 c-brp50 c-bd1-white" :src="$addXossFilter(item, require('@/assets/defult_head.png'))" alt="">
                  </span>
                </div>
                <div class="c-ww30 c-hh60 c-textAlign-c" v-if="action.thisCount > 3">
                  <span class="c-inline-center c-ww60 c-hh60 c-brp50">
                    <img class="c-ww60 c-hh60 c-brp50 c-bd1-white" :src="require('@/assets/i/wap/recommend/more_person.png')" alt="">
                  </span>
                </div>
              </div>
              <div class="c-fc-sblack c-fs22 c-ml46">{{action.thisCount}}人已{{recommendType == 1 ? '分享': recommendType == 2 ? '注册' : recommendType == 3 ? '下单':''}}</div>
            </div>
            <div class="c-fs22 c-fc-sblack" @click="handleClickViewDetail">
              <span>查看详情</span>
              <i class="iconfont c-fc-xblack c-fs22 c-ml10">&#xe635;</i>
            </div>
          </div>
        </div>
        <div class="recommend_inviteB c-m-0auto"></div>
      </div>
      <!-- 我的奖励 -->
      <div class="c-w100 c-mt30 c-ph22" v-if="isRecommendOrder != 1 && action != null && action.isTaskReward">
        <div class="c-bg-FFF8F5 c-br10 c-ph20 c-pv30">
          <div class="c-ww480 c-hh44 c-m-0auto">
            <img :src="require('@/assets/i/wap/recommend/reward.png')" alt="">
          </div>
          <div class="c-w100 c-mt20 c-p" :class="tabList.length > 4 ? 'tab_mask':''" v-if="type == 2">
            <my-small-tabbar :tbaIconBg="'c-bg-xmlred'" :flexClass="'c-flex-row'" :tabNameClass="'c-fs24'" :fontSet="{defaultColor:'c-fc-sblack', activeColor:'c-fw600 c-fc-FF2F0B'}" :tabList="tabList" tabHeight="60" :isScroll="true" tabColorRGB="'255,48,12'" :tabIndex="tabIndex" @changeTab="changeTab"></my-small-tabbar>
          </div>
          <!-- list -->
          <div class="c-w100 c-mt20">
            <template v-if="type == 1">
              <recommend-reward :mainReward="mainReward"></recommend-reward>
            </template>
            <template v-else>
              <recommend-reward :mainReward="mainReward[tabIndex]"></recommend-reward>
            </template>
          </div>
        </div>
      </div>
      <!-- 好友奖励 -->
      <div class="c-w100 c-mt30 c-ph22" v-if="action != null && action.isBeTaskReward && isRecommendOrder != 1">
        <div class="c-bg-FFF8F5 c-br10 c-ph20 c-pv30">
          <div class="c-ww480 c-hh44 c-m-0auto">
            <img :src="require('@/assets/i/wap/recommend/friend_reward.png')" alt="">
          </div>
          <!-- list -->
          <div class="c-w100 c-mt20">
            <recommend-reward :mainReward="childReward"></recommend-reward>
          </div>
        </div>
      </div>
      <!-- 我的收益 -->
      <div class="c-w100 c-ph22" :class="isRecommendOrder == 1?'c-mt60':'c-mt30'">
        <div class="c-bg-FFF8F5 c-br10 c-pb30 c-p">
          <div class="view_details c-pa c-p-r0 c-p-t10 c-flex-row c-flex-center c-fs20 c-fc-white c-fw600" v-if="isRecommendOrder == 1 || recommendType == 3" @click="handleClickProfit">查看明细</div>
          <div class="recommend_earnings c-ww272 c-hh52 c-fs32 c-flex-row c-aligni-baseline c-justify-center c-fw600" @click="handleClickMyEarning">我的收益
            <i class="iconfont c-fs28 c-fc-FF300C c-ml10">&#xe669;</i>
          </div>
          <template v-if="isRecommendOrder != 1">
            <template v-if="action != null && recommendType == 3">
              <div class="c-flex-row c-flex-center c-fs24 c-fw600 c-fc-sblack c-mt44" @click="handleClickCommission">佣金
                <span class="c-ml10 c-fw400">(元)</span>
                <i class="c-fs28 iconfont c-fc-gray c-ml10">&#xe669;</i>
              </div>
              <div class="c-flex-row c-flex-center c-fs52 c-fc-F4223B c-fw600 c-mt30">{{myProfit.recommendAmount}}</div>
            </template>
            <div class="c-flex-row c-justify-sb c-aligni-center c-mt30" v-if="myProfit != null">
              <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickMyIntegral">
                <div class="c-fs22 c-fc-sblack">
                  <span>{{ customPointName }}</span>
                  <span class="iconfont c-fs22">&#xe635;</span>
                </div>
                <div class="c-fs32 c-fc-xblack c-fw600 c-mt10">{{myProfit.totalPoints}}</div>
              </div>
              <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickValueVoucher">
                <div class="c-fs22 c-fc-sblack">
                  <span>优惠劵</span>
                  <span class="iconfont c-fs22">&#xe635;</span>
                </div>
                <div class="c-fs32 c-fc-xblack c-fw600 c-mt10">{{myProfit.totalRedeemCode}}</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="c-flex-row c-flex-center c-fs24 c-fw600 c-fc-sblack c-mt44" @click="handleClickCommission">佣金
              <span class="c-ml10 c-fw400">(元)</span>
              <i class="c-fs28 iconfont c-fc-gray c-ml10">&#xe669;</i>
            </div>
            <div class="c-flex-row c-flex-center c-fs52 c-fc-F4223B c-fw600 c-mt30">{{totalRecommend.recommendAmount}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-mt30">
              <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickMyIntegral">
                <div class="c-fs22 c-fc-sblack">
                  <span>{{ customPointName }}</span>
                  <span class="iconfont c-fs22">&#xe635;</span>
                </div>
                <div class="c-fs32 c-fc-xblack c-fw600 c-mt10">{{totalRecommend.totalPoints}}</div>
              </div>
              <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickValueVoucher">
                <div class="c-fs22 c-fc-sblack">
                  <span>优惠劵</span>
                  <span class="iconfont c-fs22">&#xe635;</span>
                </div>
                <div class="c-fs32 c-fc-xblack c-fw600 c-mt10">{{totalRecommend.totalRedeemCode}}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 购买记录 -->
      <div class="c-w100 c-mt30 c-ph22" v-if="isRecommendOrder == 1">
        <div class="c-bg-FFF8F5 c-br10 c-ph20 c-pv30">
          <div class="c-ww480 c-p-l0 c-p-r0 c-m-0auto">
            <img :src="require('@/assets/i/wap/recommend/purchase_record.png')" alt="">
          </div>
          <!-- 邀请人数 -->
          <div class="c-flex-row c-justify-sb c-aligni-center c-hh60 c-mt30" v-if="totalRecommend.recCount > 0">
            <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center">
              <div class="c-flex-row c-aligni-center">
                <div class="c-ww30 c-hh60 c-textAlign-c" v-for="(item, index) in totalRecommend.avatars" :key="index">
                  <span class="c-inline-center c-ww60 c-hh60 c-brp50">
                    <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(item, require('@/assets/defult_head.png'))" alt="">
                  </span>
                </div>
              </div>
              <div class="c-fc-sblack c-fs22 c-ml46">{{totalRecommend.recCount}}{{ !$isWxAppIos() ? '人已购买' : '人已参加' }}</div>
            </div>
            <div class="c-fs22 c-fc-sblack" @click="handleClickViewDetail">
              <span>查看详情</span>
              <i class="iconfont c-fc-xblack c-fs22 c-ml10">&#xe635;</i>
            </div>
          </div>
          <loading-status-tem
            v-if="totalRecommend.recCount == 0"
            :noData="true"
            pt20="true"
            :noDataText="'当前活动，暂无购买记录'"
          ></loading-status-tem>
        </div>
      </div>
      <!-- 推荐产品赚奖励 -->
      <div class="c-w100 c-mt30 c-ph22" v-if="isRecommendOrder == 1">
        <div class="c-bg-FFF8F5 c-br10 c-ph20 c-pv30">
          <div class="c-ww480 c-p-l0 c-p-r0 c-m-0auto">
            <img :src="require('@/assets/i/wap/recommend/products_reward.png')" alt="">
          </div>
          <!-- list -->
          <div class="c-w100 c-mt20" v-if="totalRecommend.recProds != null && totalRecommend.recProds.length > 0">
            <template v-for="(item, index) in totalRecommend.recProds">
              <div class="c-flex-row c-aligni-center c-p reward_item c-br12 c-mb20" :key="index" @click="handleClickGoDetail(item)">
                <div class="c-ww180 c-hh120 c-p c-br12">
                  <template v-if="item.prodType == ckFrom.vip">
                    <img class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_vip.png'))" alt="">
                  </template>
                  <template v-else-if="item.prodType == ckFrom.svip">
                    <img class="c-w100 c-h c-object-fit-c" :src="$addXossFilter(require('@/assets/i/wap/recommend/recommend_svip.png'))" alt="">
                  </template>
                  <template v-else>
                    <img class="c-w100 c-h c-object-fit-cover c-br12" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" alt="">
                  </template>
                  <div class="c-pa c-p-b0 c-p-r0 c-ph8 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br-tl12 c-br-br12 c-flex-row c-flex-center">{{typeMap[item.prodType]}}</div>
                </div>
                <div class="c-flex-grow1 c-w0 c-ml14 c-flex-column c-pv16 c-pr20 c-justify-sb c-hh120">
                  <p class="c-fs26 c-fc-sblack c-fw600 c-text-ellipsis1">{{item.prodName}}</p>
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-fs22 c-fc-gray c-flex-grow1 c-w0">
                      <span class="c-fs18 c-fc-FF4323">{{'￥' | iosPriceFilter}}</span>
                      <span class="c-fc-FF4323">{{item.prodPrice}}</span>
                      <span class="c-mh10">|</span>
                      <span class="c-fc-gray">{{item.buyCount}}{{ !$isWxAppIos() ? '人已购' : '人已参加' }}</span>
                    </div>
                    <template v-if="item.isProfitReward">
                      <div class="reward_unclaimed c-ph20 c-hh36 c-br18 c-fs20 c-fw600 c-fc-white c-flex-row c-flex-center">赚
                        <span>{{'￥' | iosPriceFilter}}</span>{{item.profitRewardPrice}}
                      </div>
                    </template>
                    <template v-else>
                      <div class="reward_unclaimed c-ph20 c-hh36 c-br18 c-fs20 c-fw600 c-fc-white c-flex-row c-flex-center">赚奖励</div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <template v-if="totalRecommend.recProds != null && totalRecommend.recProds.length == 0">
            <loading-status-tem
              :noData="true"
              pt20="true"
              :noDataText="'当前暂无活动，进店逛逛吧'"
            ></loading-status-tem>
            <div class="c-ww280 c-hh72 c-br36 c-flex-row c-flex-center c-m-0auto c-fs28 c-fc-white c-fw600 products_btn" @click="handleClickIndex()">进店逛逛</div>
          </template>
        </div>
      </div>
    </div>
    <div v-show="showBottom && isRecommendOrder != 1" ref="shareBtn" class="c-pf c-bg-FFF8F5 c-maxw640 c-flex-row c-aligni-center c-justify-sb c-p-b0 c-mlr-auto c-w100 c-hh110 c-ph22 c-pv20">
      <div class="c-ww280 c-hh72 c-br12 c-fs28 c-fw600 c-flex-row c-flex-center share_link_btn_l" @click.stop="handleClickShareMoreModal()">分享链接</div>
      <div class="c-ww280 c-hh72 c-br12 c-fs28 c-fw600 c-fc-white c-flex-row c-flex-center share_link_btn_r" @click.stop="handleClickSharePost">分享海报</div>
    </div>
    <share-mask :maskModel="shareModal" @handleClickMask="handleClickCloseShareModal()" :txtContent="'点击屏幕右上角将本页分享给好友'"></share-mask>
    <recommend-modal :dataStatus="dataStatus" @scrollContent="scrollContent" @closeModalRecommend="closeModalRecommend" :showOpenModal="showOpenModal" :list="shareUserList" :type="isRecommendOrder != 1 ? recommendType : 3" :number="isRecommendOrder != 1 ? action != null && action.thisCount : totalRecommend.recCount"></recommend-modal>
    <cj-popup v-model="showRules" round :closeable="true" title="活动规则" class="c-ww500 c-pb20">
      <div class="c-w100 c-ph30 c-fs24 c-textAlign-l" v-for="(item, index) in ruleList" :key="index">
        {{item}}
      </div>
      <!-- <div class="c-mt40" @click="showRules=false"><span class="iconfont c-fc-white c-fs48">&#xe84e;</span></div> -->
    </cj-popup>
    <recommend-present ref="recommendPresent"></recommend-present>
    <recommend-post :shareposter="shareposter" :sharePostInfo="shareInfo" @closeSharePost="closeSharePost"></recommend-post>
  </div>
</template>

<script>
  import { mapMutations, mapState } from 'vuex';
  import { utilJs } from "@/utils/common.js";
  import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
  import MySmallTabbar from '@/components/templates/common/MySmallTabbar.vue';
  import ShareMask from "@/components/templates/common/shareMask.vue";
  import recommendPresent from '@/components/templates/recommendPresent';
  import RecommendReward from "./recommendReward";
  import RecommendModal from "./recommendModal";
  import RecommendPost from "./recommendPost"
  import { goDetails } from "@/utils/goDetails.js";
  import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
  let LIMIT = 10;
  let pageIndex = 1;
  export default {
    name: 'RecommendIndex1',
    components: {
      MySmallTabbar,
      ShareMask,
      loadingStatusTem,
      RecommendReward,
      RecommendModal,
      RecommendPost,
      recommendPresent
    },
    data() {
      return {
        customPointName: localStorage.getItem("customPointName"),
        shareposter: false,
        showOpenModal: false,
        showBottom: false,
        shareModal: false,
        tabIndex: 0,
        tabList: [],
        isShowShare: false,
        showSharePost: false, //显示邀请海报
        isCanvasOver: false, //邀请海报是否绘制完成
        shareInfo: null,
        status: 1, //1:上架中，0：非上架中
        name: '', //活动名称
        type: 1, //获取奖励方式 1：达到条件 2：阶梯目标
        recommendType: 1, //推荐类型 1 访问 2 绑定 3 支付
        relateId: null, //推荐人id
        mainReward: {}, //推荐人礼包
        childReward: {}, //被推荐人礼包
        time: '', //活动时间
        beginTime: '', //活动开始时间
        endTime: '', //活动结束时间
        shareUrl: '', //分享跳转链接
        clickGetPresent: false, //是否点击领取奖励
        discountList: [], //被推荐人奖励优惠券
        equityList: [], //被推荐人奖励会员权益
        familyCardData: [], //被推荐人奖励亲情卡
        integral: 0, //被推荐人奖励积分
        checkText: '',
        ruleList: [],
        showRules: false,
        myProfit: null, //我的收益
        action: null,
        shareUserList: [],
        totalRecommend: {},
        typeMap: global.prodMapType,
        ckFrom: global.ckFrom,
        recId: "",
        dataStatus: 'HAS_MORE_DATA',
        bindPhoneSetting: null
      }
    },
    deactivated() {
      this.$cjConfirm.hide();
    },
    computed: {
      ...mapState({
        showMoreShareModal: state => state.oem_store.showMoreShareModal
      }),
    },
    activated() {
      setDocumentTitle("推荐有礼");
      this.recRelateId = this.$route.query.recRelateId || '';
      this.recType = this.$route.query.recType || '';
      this.bindPhone = this.$route.query.bindPhone || '';
      this.refereeId = this.$route.query.refereeId || '';
      this.recId = this.$route.query.recId || '';
      this.isRecommendOrder = this.$route.query.type || '';
      this.shareModal = this.showMoreShareModal;
      this.shareposter = false;
      this.showBottom = false;
      this.showOpenModal = false;
      this.tabIndex = 0;
      this.tabList = [];
      this.shareUserList = [];
      this.totalRecommend = {};
      this.isShowShare = false;
      this.showSharePost = false;
      this.isCanvasOver = false;
      this.ruleList = [];
      this.shareInfo = null;
      this.status = 1;
      this.name = '';
      this.type = 1;
      this.recommendType = 1;
      this.relateId = null;
      this.mainReward = {};
      this.childReward = {};
      this.time = '';
      this.beginTime = '';
      this.endTime = '';
      this.shareUrl = '';
      this.isShowShare = false;
      this.showSharePost = false;
      this.discountList = [];
      this.equityList = [];
      this.familyCardData = [];
      this.integral = 0;
      this.checkText = '';
      getBindPhoneSetting(113).then(res => {
        this.bindPhoneSetting = res;
      });
      console.log(this.isRecommendOrder)
      if (this.isRecommendOrder != 1) {
        this.getRecommendInfo();
      } else {
        this.getWxTotalRecommendData()
      }
      this.isRecommendPage();
      window.addEventListener('scroll', this.windowScrollFunction);
    },
    created() {
      utilJs.appShare(this);
    },
    methods: {
      handleClickIndex() {
        this.$routerGo(this, "replace", { path: '/' })
      },
      handleClickShareMoreModal() {
        if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
          if (utilJs.goBindMobile()) return;
        }
        this.updateShowMoreShareModal(true)
        this.shareModal = this.showMoreShareModal
      },
      handleClickCloseShareModal() {
        this.updateShowMoreShareModal(false)
        this.shareModal = this.showMoreShareModal
      },
      ...mapMutations(['updateShowMoreShareModal']),
      //作为分享页被推荐人进入
      isRecommendPage() {
        let recRelateId = this.recRelateId; //推荐人ID
        let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
        let bindPhone = this.bindPhone; //完成推荐绑定手机号
        let data = {relateId: recRelateId};
        if (recRelateId && recType) {
          if (recType == 1) {
            this.$nextTick(() => {
              this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
            })
          } else if (recType == 2) {
            if (bindPhone) {
              data.mobile = localStorage.getItem("uMobile");
              this.$nextTick(() => {
                this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
              })
            } else if (!localStorage.getItem("uMobile")) {
              let q = {recRelateId: recRelateId, recType: recType, goRecom: 1};
              if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
                q.refereeId = this.refereeId;
              }
              utilJs.goBindMobile(q);
            } else {
              this.$cjConfirm({
                title: '领取失败',
                message: '您已绑定过手机号，不在推荐范围，无法领取奖励',
                showCancelButton: false,
              })
            }
          }
        }
      },
      handleClickSharePost() {
        if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
          if (utilJs.goBindMobile()) return;
        }
        this.shareposter = true;
      },
      closeSharePost() {
        this.shareposter = false;
      },
      handleClickGoDetail(item) {
        let courseType = item.prodType == 5 ? item.courseType : '';
        let prodType = item.prodType == 110 || item.prodType == 111 || item.prodType == 112 ? global.ckFrom.course : item.prodType;
        goDetails(this, prodType, item.prodId, '', courseType)
      },
      handleClickValueVoucher() {
        this.$routerGo(this, 'push', {
          path: '/member/myValueVoucher/myValueVoucher'
        })
      },
      handleClickMyIntegral() {
        this.$routerGo(this, 'push', {
          path: '/member/myIntegral/integralDetail'
        })
      },
      getWxTotalRecommendData() {
        utilJs.getMethod(global.apiurl + `activity/recommend/getWxTotalRecommendData`, res => {
          console.log(res)
          this.totalRecommend = res;
          this.wechatShare();
        })
      },
      handleClickCommission() {
        let freezeAmount = this.isRecommendOrder == 1 ? this.totalRecommend.freezeAmount : this.myProfit.freezeAmount;
        this.$cjConfirm({
          title: '累计佣金', //
          titleCenter: true, //标题是否居中
          message: `1.累计金额包含待结算金额${freezeAmount},可在个人中心-账户提现。</br></br>2.推广金额过了冻结期,对应的佣金可提现。`,
          messageCenter: false, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: false, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '好的', //确认按钮文本
          color: 'linear-gradient(0deg, #FF300C 0%, rgba(255, 48, 12, 0.7) 100%)',
          onConfirm() {
          },
          onCancel() {
          },
        })
      },
      // 我的收益
      handleClickMyEarning() {
        let name = '';
        if (this.isRecommendOrder == 1) {
          name = '我的收益包括所有参与过推荐好友支付获得的收益'
        } else {
          name = this.recommendType == 1 ? '我的收益指该次参与推荐好友访问获得的收益' : this.recommendType == 2 ? '我的收益指该次参与推荐好友注册获得的收益' : this.recommendType == 3 ? '我的收益包括所有参与过推荐好友支付获得的收益' : '';
        }
        this.$cjConfirm({
          title: '我的收益', //
          titleCenter: true, //标题是否居中
          message: `${name}`,
          messageCenter: false, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: false, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '好的', //确认按钮文本
          color: 'linear-gradient(0deg, #FF300C 0%, rgba(255, 48, 12, 0.7) 100%)',
          onConfirm() {
          },
          onCancel() {
          },
        })
      },
      scrollContent() {
        this.$nextTick(() => {
          let element = document.getElementById('scrollContent');
          utilJs.elementLoading(element, () => {
            if (this.dataStatus == 'HAS_MORE_DATA' && this.shareUserList.length > 0) {
              this.getShareUserList();
            }
          })
        })
      },
      getShareUserList() {
        let relateId = this.isRecommendOrder == 1 ? '' : this.action.relateId;
        if (this.dataStatus == 'LOADING') {
          return;
        }
        this.dataStatus = 'LOADING';
        utilJs.postMethod(global.apiurl + `activity/recommend/getShareUserList`, {
          relateId: relateId,
          page: pageIndex,
          limit: LIMIT
        }, res => {
          if (pageIndex == 1) {
            this.shareUserList = res.data || [];
          } else {
            this.shareUserList = [...this.shareUserList, ...res.data]
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA'
          } else {
            this.dataStatus = 'HAS_MORE_DATA'
            pageIndex++
          }
          this.showOpenModal = true;
        })
      },
      closeModalRecommend() {
        pageIndex = 1;
        LIMIT = 10;
        this.shareUserList = [];
        this.dataStatus = 'HAS_MORE_DATA';
        this.showOpenModal = false;
      },
      handleClickViewDetail() {
        this.getShareUserList();
      },
      // 数据初始化
      getRecommendInfo() {
        let data = {
          recId: this.recId,
          recRelateId: this.recRelateId
        }
        utilJs.postMethod(global.apiurl + `activity/recommend/getWxRecommendData`, data,
          res => {
            if (res.isExist) {
              let action = res.action;
              this.action = action;
              this.type = action.mainRewardType;
              this.relateId = action.relateId;
              this.recommendType = action.recommendType;
              this.myProfit = action.myProfit;
              if (this.type == 1) {
                this.mainReward = action.mainReward[0];
                // this.rewardItemLength[5] = this.getRewardItemLength(this.mainReward);
                // this.getCount = this.mainReward.getCount;
                // this.lastCount = this.mainReward.lastCount + this.mainReward.getCount;
              } else {
                this.mainReward = action.mainReward;
                for (let i = 0; i < this.mainReward.length; i++) {
                  // this.rewardItemLength[i] = this.getRewardItemLength(this.mainReward[i]);
                  let obj = {
                    title: `${this.mainReward[i].peopleCount}人奖励`,
                    index: i
                  }
                  this.tabList.push(obj)
                }
              }
              this.childReward = action.childReward;
              // this.rewardItemLength[6] = this.getRewardItemLength(this.childReward);
              this.name = action.name;
              this.status = action.status;
              this.beginTime = new Date(action.beginTime.replace(/-/g, '/'));
              this.endTime = new Date(action.endTime.replace(/-/g, '/'));
              this.time = '活动时间：' +
                action.beginTime.split(' ')[0].replace(/-/g, '.') + ' - ' +
                action.endTime.split(' ')[0].replace(/-/g, '.');
              if (this.relateId && this.status) {
                this.getSharePostInfo();
              }
              let recommendRule = action.recommendRule.trim();
              if (recommendRule != '') {
                this.ruleList = recommendRule.split(/\s{3,}|\n/g);
              }
            } else {
              this.$cjConfirm({
                title: '该活动不存在',
                showCancelButton: false,
                clickCloseModal: false,
                onConfirm:() => {
                  this.$routerGo(this, "push", { path: "/member/memberIndex" });
                }
              })
            }
          }
        );
      },
      //获取分享海报
      getSharePostInfo() {
        let data = {relateId: this.relateId};
        utilJs.postMethod(global.apiurl + `activity/recommend/getShareLink`, data,
          res => {
            let info = {
              imageId: res.imageId,
              headimgurl: res.headimgurl,
              isShowRecommender: res.isShowRecommender,
              nickname: res.nickname,
              proTxt: res.proTxt,
              qrcode: res.qrcode,
              recShareData: res.recShareData,
              shareImg: res.shareImg,
              shareName: res.shareName,
              url: res.url,
            };
            this.shareUrl = res.url;
            this.shareInfo = info;
            this.wechatShare();
          })
      },
      //分享
      wechatShare: function () {
        let shareUrl = '';
        let title = '';
        let shareDesc = '下单就有惊喜礼包等着你';
        let shareImg = require('../../../assets/i/wap/recommend/shareBg.png');
        // 是否有分销isProfitReward
        if (this.action != null && this.action.isProfitReward && this.shareInfo != null && this.isRecommendOrder != 1) {
          shareUrl = this.shareUrl;
          if (this.shareInfo.recShareData.prodType == 0) {
            title = `好友推荐${this.shareInfo.recShareData.prodName}` || this.name;
          } else {
            title = `好友推荐${this.typeMap[this.shareInfo.recShareData.prodType]}${this.shareInfo.recShareData.prodName}` || this.name;
          }
          shareImg = this.shareInfo.recShareData.avatar;
          if (this.action.beProfitRewardPrice != '') {
            // 被推荐人的优惠金额
            shareDesc = `报名学习立减${this.action.beProfitRewardPrice},去报名`;
          } else if (this.recommendType == 1 || this.recommendType == 2) {
            title = this.name;
            shareDesc = '超多福利等你来领取';
          }
        } else if (this.action != null && this.isShowRecommender != 1 && this.shareInfo != null && this.action.isProfitReward == 0) {
          shareUrl = this.shareUrl;
          if (this.shareInfo.recShareData.prodType == 0) {
            title = `好友推荐${this.shareInfo.recShareData.prodName}` || this.name;
          } else {
            title = `好友推荐${this.typeMap[this.shareInfo.recShareData.prodType]}${this.shareInfo.recShareData.prodName}` || this.name;
          }
          shareImg = this.shareInfo.recShareData.avatar;
          if (this.action.beProfitRewardPrice != '') {
            // 被推荐人的优惠金额
            shareDesc = `报名学习立减${this.action.beProfitRewardPrice},去报名`;
          } else if (this.recommendType == 1 || this.recommendType == 2) {
            title = this.name;
            shareDesc = '超多福利等你来领取';
          }
        } else {
          title = `邀请好友下单有礼`;
          shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?recId=${this.recId}&type=${this.isRecommendOrder}`;
          if (this.isRecommendOrder != 1) {
            if (this.recommendType == 1 || this.recommendType == 2) {
              title = this.name
              shareDesc = '超多福利等你来领取';
            }
          }
        }
        utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
      },
      //手机端分享
      appShare: function () {``
        let shareUrl = '';
        let title = '';
        let shareDesc = '下单就有惊喜礼包等着你';
        let shareImg = require('../../../assets/i/wap/recommend/shareBg.png');
        // 是否有分销
        if (this.action && this.action.isProfitReward && this.shareInfo != null && this.isRecommendOrder != 1) {
          shareUrl = this.shareUrl;
          if (this.shareInfo.recShareData.prodType == 0) {
            title = `好友推荐${this.shareInfo.recShareData.prodName}` || this.name;
          } else {
            title = `好友推荐${this.typeMap[this.shareInfo.recShareData.prodType]}${this.shareInfo.recShareData.prodName}` || this.name;
          }
          shareImg = this.shareInfo.recShareData.avatar;
          if (this.action.beProfitRewardPrice != '') {
            shareDesc = `报名学习立减${this.action.beProfitRewardPrice},去报名`;
          } else if (this.recommendType == 1 || this.recommendType == 2) {
            title = this.name;
            shareDesc = '超多福利等你来领取';
          }
        } else if (this.action != null && this.isShowRecommender != 1 && this.shareInfo != null && this.action.isProfitReward == 0) {
          shareUrl = this.shareUrl;
          if (this.shareInfo.recShareData.prodType == 0) {
            title = `好友推荐${this.shareInfo.recShareData.prodName}` || this.name;
          } else {
            title = `好友推荐${this.typeMap[this.shareInfo.recShareData.prodType]}${this.shareInfo.recShareData.prodName}` || this.name;
          }
          shareImg = this.shareInfo.recShareData.avatar;
          if (this.action.beProfitRewardPrice != '') {
            // 被推荐人的优惠金额
            shareDesc = `报名学习立减${this.action.beProfitRewardPrice},去报名`;
          } else if (this.recommendType == 1 || this.recommendType == 2) {
            title = this.name;
            shareDesc = '超多福利等你来领取';
          }
        } else {
          title = `邀请好友下单有礼`;
          shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?recId=${this.recId}&type=${this.isRecommendOrder}`;
          if (this.isRecommendOrder != 1) {
            if (this.recommendType == 1 || this.recommendType == 2) {
              title = this.name
              shareDesc = '超多福利等你来领取';
            }
          }
        }
        utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
      },
      handleClickProfit() {
        this.$routerGo(this, "push", {
          path: '/member/recommend/recommendProfit',
          query: {

          }
        })
      },
      changeTab(type) {
        this.tabIndex = type;
      },
      windowScrollFunction(e) {
        const offsetY = e.target.scrollTop || window.pageYOffset || document.body.scrollTop
        if (offsetY >= 80) {
          this.showBottom = true
        } else {
          this.showBottom = false
        }
      },
    }
  }
</script>

<style lang="less" scoped>
.c-bg-FFF8F5 {
  background: #FFF8F5;
}
.c-bg-gradient {
  background-image: linear-gradient(0deg, #FF300C 0%, rgba(255, 48, 12, 0.7) 100%);
}
.c-fc-FF4323 {
  color: #FF4323;
}
.c-fc-FF300C {
  color: #FF300C;
}
.c-fc-FF2F0B {
  color: #FF2F0B;
}
.c-fc-F4223B {
  color: #F4223B;
}
.recommend_wrap {
  background: #FA704E;
  .recommend_topbg {
    min-height: 21.05rem;
    background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/recommend/bg.png") no-repeat top center;
    background-size: contain;
    .recommend_rules {
      width: 2.8rem;
      height: 1.1rem;
      border-radius: .55rem 0 0 .55rem;
    }
    .recommend_title {
      width: 13.3rem;
      margin: 0 auto;
      padding-top: 2.15rem;
      img {
        height: 1.65rem;
      }
      &.friends{
        width: 14.25rem;
        img {
          height: 2.75rem;
        }
      }
    }
    .recommend_dateCon {
      margin: .65rem 0 0 0;
      .recommend_date {
        width: 12rem;
        height: 1.25rem;
        background: url("../../../assets/i/wap/recommend/date_bg.png") no-repeat center center;
        background-size: contain;
      }
    }
    .recommend_envelopes {
      position: relative;
      height: 17rem;
      background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/recommend/envelopes.png") no-repeat center center;
      background-size: contain;
      .recommend_envelopesCon {
        position: relative;
        width: 100%;
        height: 100%;
        .envelopes_text {
          position: absolute;
          left: 0;
          right: 0;
          top: 1.7rem;
          color: #FF300C;
        }
        .envelopes_mony {
          position: absolute;
          left: 0;
          right: 0;
          top: 3rem;
          color: #F4223B;
          .price {
            background: linear-gradient(to bottom, #FF9716, #FF2147);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
          }
        }
        .recommend_text {
          top: 5.3rem;
          color: #FF3921;
          &:after {
            position: absolute;
            right: -.125rem;
            width: 1.85rem;
            height: .8rem;
            background: url("../../../assets/i/wap/recommend/dasheed.png") no-repeat center center;
            background-size: contain;
            content: "";
          }
          &:before {
            position: absolute;
            left: -.125rem;
            width: 1.85rem;
            height: .8rem;
            background: url("../../../assets/i/wap/recommend/dasheed.png") no-repeat center center;
            background-size: contain;
            content: "";
          }
        }
        .recommend_sharebtn {
          position: absolute;
          left: 0;
          right: 0;
          top: 9.9rem;
          width: 9.4rem;
          color: #FF2246;
        }
        .recommend_shareTxt {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 3.5rem;
          color: #FFF0C7;
        }
      }
    }
    .recommend_treasure {
      height: 13.35rem;
      background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/recommend/treasure .png") no-repeat center center;
      background-size: contain;
      padding-top: 7.1rem;
      .recommend_sharebtn {
        width: 9.4rem;
        color: #FF2246;
        // padding-top: 8.2rem;
      }
      .recommend_shareTxt {
        color: #FFF0C7;
      }
    }
    .recommend_invite {
      width: 14.9rem;
      min-height: 6.4rem;
      margin-top: -1px;
      background: url("../../../assets/i/wap/recommend/invite_center.png") repeat center center;
      background-size: contain;
      .progress-wrap {
        position: relative;
        margin-top: 1rem;
        min-height: 1.15rem;
        .progress-bg {
          position: relative;
          width: 100%;
          height: .4rem;
          background: #FFDFE1;
          border-radius: .25rem;
          .progress-bar {
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            background-image: linear-gradient(90deg, #FF5E1C 4%, #FF300C 96%);
            border-radius: .25rem;
            z-index: 1;
          }
        }
        .stage-wrap {
          .stage-item {
            &:first-child {
              .dot-under {
                transform: translateX(-34%);
              }
            }
            &:last-child {
              transform: translate(-1.4rem,-1.15rem);
              z-index: 2;
              .dot-under {
                margin-top: .25rem;
                transform: translateX(-38%);
              }
            }
            position: absolute;
            top: 0;
            .dot {
              width: .4rem;
              height: .4rem;
              border-radius: 100%;
              background: #FFB3B8;
              &.active {
                background: #FF300C ;
                transform: translateX(-0.3rem);
              }
            }
            .dot-under {
              position: absolute;
              left: 50%;
              width: 1.5rem;
              margin-top: .3rem;
              font-size: .6rem;
              color: #FF300C;
              text-align: center;
              transform: translateX(-50%);
              white-space: nowrap;
            }
          }
        }
      }
    }
    .recommend_inviteB {
      width: 14.9rem;
      height: .85rem;
      margin-top: -1px;
      background: url("../../../assets/i/wap/recommend/invite_bottom.png") no-repeat center center;
      background-size: cover;
    }
    .tab_mask:after {
      position: absolute;
      top: 0;
      right: -.6rem;
      width: .75rem;
      height: 1.5rem;
      background: url("../../../assets/i/wap/recommend/tab-bg.png") no-repeat center center;
      background-size: contain;
      content: '';
    }
    .reward_item {
      background: #FFE8E5;
      .reward_unclaimed {
        background: #FF4323;
      }
    }
    .recommend_earnings {
      background: url("../../../assets/i/wap/recommend/recommend_earnings.png") no-repeat center center;
      background-size: contain;
      color: #FF4323;
    }
    .view_details {
      width: 2.8rem;
      height: 1.1rem;
      background: #FF300C;
      border-radius: .55rem 0 0 .55rem;
    }
    .products_btn {
      background-image: linear-gradient(0deg, #FF300C 0%, rgba(255,48,12,0.70) 100%);
    }
  }
  .share_link_btn_l {
    color: #FE4D2D;
    background-image: linear-gradient(0deg, rgba(255, 48, 12, .1) 0%, rgba(255,48,12,0.1) 100%);
  }
  .share_link_btn_r {
    background-image: linear-gradient(0deg, #FF300C 0%, rgba(255,48,12,0.70) 100%);
  }
}
</style>